<template>
		<uni-popup ref="popupRef" type="bottom" :isMaskClick="false">
			<view class="content">
				<view class="btn-box">
					<view class="btn" @tap="close"> 取消 </view>
					<view class="title"> 请选择时间 </view>
					<view class="btn" @tap="selectTime"> 确定 </view>
				</view>
				<view class="time-box">
					<picker-view :value="startTime" @change="startChange" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in 24" :key="index">
								{{ index >= 10 ? index : '0' + index }}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in 60" :key="index">
								{{ index >= 10 ? index : '0' + index }}
							</view>
						</picker-view-column>
					</picker-view>
					<view class="pad"> 至 </view>
					<picker-view :value="endTime" @change="endChange" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in 24" :key="index">
								{{ index >= 10 ? index : '0' + index }}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in 60" :key="index">
								{{ index >= 10 ? index : '0' + index }}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
</template>

<script setup>
	import { ref } from 'vue';
	const emit = defineEmits(['selectedTime'])
	const popupRef = ref()
	const startTime = ref([0, 0])
	const endTime = ref([0, 0])
	const startChange = (e) => {
		console.log(e);
		startTime.value = e.detail.value
	}
	const endChange = (e) => {
		endTime.value = e.detail.value
	}
	const open = () => {
		popupRef.value.open()
	}
	const selectTime = () => {
		const sh = (startTime.value[0]) >=10 ? (startTime.value[0]) : '0' + (startTime.value[0]).toString()
		const sm = (startTime.value[1]) >=10 ? (startTime.value[1]) : '0' + (startTime.value[1]).toString()
		const eh = (endTime.value[0]) >=10 ? (endTime.value[0]) : '0' + (endTime.value[0]).toString()
		const em = (endTime.value[1]) >=10 ? (endTime.value[1]) : '0' + (endTime.value[1]).toString()
		const time = sh + ':' + sm + '至' + eh + ':' + em
		emit('selectedTime', time)
	}
	const close = () => {
		popupRef.value.close()
		startTime.value = [0, 0]
		endTime.value = [0, 0]
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		// height: 300px;
		padding: 10px 12px;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 10px 10px 0 0 ;
		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title {
				color: #1D2129;
				font-size: 15px;
				font-weight: 400;
			}
			.btn {
				color: #165DFF;
				font-size: 15px;
				font-weight: 400;
			}
		}
		.time-box {
			display: flex;
			align-items: center;
			.pad {
				margin: 0 20px;
			}
			.picker-view {
				width: 750rpx;
				height: 240px;
				.item {
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>